<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/font/iconfont.css" media="all">
    <link rel="stylesheet" href="../assets/font-awesome-4.7.0/css/font-awesome.css" media="all">
    <style type="text/css">
        html,body{
            margin: 0;
            padding: 0;
            width:100%;
            height: 100%;
            /*color:rgb(0,228,253);*/
            color:#00E4FD;
            /*overflow: hidden;*/
        }
        .topDiv {
            position: relative;
            top: 20px;
            left: 0;
            right: 0;
            height: 60px;
            text-align: center;
        }
        #scrollobj{
            white-space:nowrap;
            overflow:hidden;
            width:80%;
            /*background-color:#CCC;*/
            font-size: 16px;
            margin-left: 10%;
        }

    </style>

</head>
<body>
<div class="topDiv">
    <div id="scrollobj">今日预警消息</div>
</div>
<div class="content">
    <div id="mod_week" class="module module5">
        <div class="horn horn_lt"></div>
        <div class="horn horn_rt"></div>
        <div class="horn horn_lb"></div>
        <div class="horn horn_rb"></div>
        <div class="mod_pd">
            <div class="mod_divTitle">
                <span id="mod_week_title"></span>
            </div>
            <div id="mod_week_con" class="mod_con">

            </div>
        </div>
    </div>
</div>
</body>
<script src="../assets/layui/layui.js"></script>
<script src="../js/common.js"></script>
<script src="../js/Echarts/echarts.min.js"></script>
<script>
    layui.config({
        base: '../js/'
    })
    var $;
    var myChart_bar;
    layui.use(['jquery','form','validate','common'], function () {
        var form = layui.form,
            layer = layui.layer,
            validate = layui.validate,
            common = layui.common;
        $ = layui.jquery;
        myChart_bar = echarts.init(document.getElementById("mod_week_con"));
        function runScroll(){
            var str="今日预警消息";
            str+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            str+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            str+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            $("#scrollobj").html(str);
            scrollRun();
        }
        getWeekChart();
    })
    //周占比
    function getWeekChart() {
        $.ajax({
            type: "post",
            url: "../warnHome/getTaskBase",
            data: {city: pCity, sumLevel: sumLevel, cityName: pCityName,modType:"week"},
            dataType: "json",
            success: function (data) {
                var ld = [], dd = [];
                $.each(data, function (i, t) {
                    ld.push(t.typeName);
                    dd.push({name: t.typeName, value: t.num});
                })
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c} ({d}%)"
                    },
                    legend: {
                        show: true,
                        orient: 'vertical',
                        y: 'bottom',
                        left: 'right',
                        padding: 0,
                        itemWidth: 5,
                        itemHeight: 5,
                        itemGap: 1,
                        textStyle: {
                            color: '#999'
                        },
                        data: ld
                    },
                    calculable: true,
                    series: [
                        {
                            name: '半径模式',
                            type: 'pie',
                            radius: ['20%', '90%'],
                            center: ['40%', '50%'],
                            roseType: 'radius',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            lableLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            color: ['rgb(232,117,111)', 'rgb(9,176,196)', 'rgb(178,212,101)', 'rgb(237,145,65)', 'rgb(65,142,195)', 'rgb(241,199,83)', 'rgb(129,185,220)'],
                            data: dd
                        }
                    ]
                };
                myChart_bar.setOption(option, true);
            },
            error: function (err) {

            }
        });
    }

    function initSize(){
        var w=$('body').width();
        var h=$('body').height();
        var h1=(h-80)/3;
        var h2=(h-150)/3;
        var w1=(w-40)*0.27;
        var w2=(w-40)*0.46;
        var w3=(w-40)*0.36;
        var w4=(w-40)*0.37;

        $('#mod_week').attr("style","height:"+h2+"px;width:"+w1+"px;");
        $('#mod_week_con').attr("style","height:"+($('#mod_week').height()-40)+"px;");
    }

    function scrollRun(){
        var _timer=setInterval("scroll(scrollobj)",20);
        scrollobj.onmouseover=_stop;
        scrollobj.onmouseout=_start;
        function _stop(){
            if(_timer!= null){
                clearInterval(_timer);
            }
        }
        function _start() {
            _timer=setInterval("scroll(document.getElementById('scrollobj'))",20);
        }
    }
    
    function scroll(obj){
        var tmp=(obj.scrollLeft)++;
        if(obj.scrollLeft==tmp) {
            obj.innerHTML+=obj.innerHTML;
        }
        if(obj.scrollLeft>=obj.firstChild.offsetWidth) {
            obj.scrollLeft=0;
        }
    }

</script>
</html>